/*
 * @Description:通用面板标题行，包括标题，操作
 * @Author: Rfan
 * @Date: 2022-05-30 14:43:58
 * @LastEditTime: 2022-06-15 17:54:18
 */

import { useMemo, useState } from 'react';
import { Button, Divider, Space } from 'antd';
import classNames from 'classnames/bind';
import { useMetadataInheritContext } from '../contexts/MetadataInheritContext';

import styles from '../styles/metadataPane.module.scss';
import AddDialog from './dialogs/AddDialog';

const cx = classNames.bind(styles);

const PaneOperate = ({ title }: any) => {
  const { selectLevel, selectItems, deleteInheritFunc } = useMetadataInheritContext();

  const [addDialogVisivle, setAddDialogVisivle] = useState(false);

  const showDialog = () => {
    setAddDialogVisivle(true);
  };

  const delSelectItem = () => {
    deleteInheritFunc(selectItems, '确认删除选择的继承配置？');
  };

  return (
    <>
      <div className={cx('metadata-header')}>
        <div className={cx('title')}>{title}元数据继承配置</div>
        <div className={cx('opearte')}>
          <Space>
            {/* TODO：#演示相关#  暂时放开置灰的 修改 筛选 按钮 */}
            <Button>修改</Button>
            <Button
              disabled={selectItems.length <= 0}
              onClick={() => {
                delSelectItem();
              }}
            >
              删除
            </Button>
            <Button
              disabled={!selectLevel?.level}
              onClick={() => {
                showDialog();
              }}
            >
              新建
            </Button>
            <Divider type="vertical" />
            <Button>筛选</Button>
          </Space>
        </div>
      </div>
      {useMemo(
        () => (
          <AddDialog
            visible={addDialogVisivle}
            onClose={() => {
              setAddDialogVisivle(false);
            }}
          />
        ),
        [addDialogVisivle]
      )}
    </>
  );
};

export default PaneOperate;
